Kelių ekranų patirčių atvėrimas: išsami „Frontend Presentation API“ apžvalga

Šiuolaikiniame tarpusavyje susijusiame pasaulyje vartotojai tikisi sklandžios patirties naudojantis įvairiais įrenginiais. „Frontend Presentation API“ suteikia galingą mechanizmą interneto kūrėjams kurti programas, kurios išeina už vieno ekrano ribų, siūlydamos įtraukiančias ir bendradarbiavimą skatinančias kelių ekranų patirtis. Šis išsamus vadovas nagrinėja „Presentation API“ galimybes, diegimo detales ir geriausias praktikas, leidžiančias jums kurti inovatyvias interneto programas, kurios išnaudoja kelių ekranų galią.

Kas yra „Presentation API“?

„Presentation API“ yra žiniatinklio API, leidžianti tinklalapiui (prezentacijos valdikliui) atrasti ir prisijungti prie antrinių ekranų (prezentacijų imtuvų). Tai leidžia kūrėjams kurti interneto programas, kurios rodo turinį keliuose ekranuose, pavyzdžiui:

• Prezentacijos: Rodyti skaidres projektoriuje, kol pranešėjas mato pastabas savo nešiojamajame kompiuteryje.
• Skaitmeniniai ženklai: Rodyti informaciją viešuose ekranuose, valdomuose iš centrinės interneto programos.
• Žaidimai: Išplėsti žaidimo eigą į antrąjį ekraną, siekiant didesnio įsitraukimo ar bendradarbiavimo žaidimo.
• Interaktyvūs prietaisų skydeliai: Realaus laiko duomenų ir vizualizacijų rodymas per kelis monitorius valdymo kambaryje ar biuro aplinkoje.
• Bendradarbiavimo programos: Leidžia keliems vartotojams vienu metu sąveikauti su turiniu atskiruose ekranuose.

Iš esmės, „Presentation API“ leidžia jūsų interneto programai „transliuoti“ turinį į kitus ekranus. Įsivaizduokite tai kaip „Chromecast“, bet integruotą tiesiai į naršyklę ir valdomą jūsų. Ji palengvina komunikaciją tarp valdančiojo tinklalapio ir vieno ar daugiau priimančiųjų tinklalapių, kurie atvaizduoja pateiktą turinį.

Pagrindinės sąvokos ir terminologija

Norint dirbti su „Presentation API“, labai svarbu suprasti šias sąvokas:

• Prezentacijos valdiklis (Presentation Controller): Tinklalapis, kuris inicijuoja ir valdo prezentaciją. Paprastai tai yra pagrindinis ekranas, kuriame vartotojas sąveikauja su programa.
• Prezentacijos imtuvas (Presentation Receiver): Tinklalapis, rodomas antriniame ekrane. Šis puslapis gauna turinį iš prezentacijos valdiklio ir jį atvaizduoja.
• Prezentacijos užklausa (Presentation Request): Užklausa iš prezentacijos valdiklio pradėti prezentaciją konkrečiu URL adresu (prezentacijos imtuvas).
• Prezentacijos ryšys (Presentation Connection): Dvikryptis komunikacijos kanalas, sukurtas tarp prezentacijos valdiklio ir imtuvo po sėkmingos prezentacijos užklausos.
• Prezentacijos prieinamumas (Presentation Availability): Nurodo, ar yra prieinamų prezentacijos ekranų. Tai nustato naršyklė ir operacinė sistema.

Kaip veikia „Presentation API“: žingsnis po žingsnio vadovas

Kelių ekranų prezentacijos sukūrimo procesas naudojant „Presentation API“ apima kelis etapus:

1. Prezentacijos valdiklis: prieinamumo nustatymas: Prezentacijos valdiklis pirmiausia patikrina, ar yra prieinamų prezentacijos ekranų, naudodamas navigator.presentation.defaultRequest objektą.
2. Prezentacijos valdiklis: prezentacijos užklausa: Valdiklis iškviečia navigator.presentation.defaultRequest.start() su prezentacijos imtuvo puslapio URL.
3. Naršyklė: vartotojo pasirinkimas: Naršyklė paprašo vartotojo pasirinkti ekraną prezentacijai.
4. Prezentacijos imtuvas: puslapio įkėlimas: Naršyklė įkelia prezentacijos imtuvo puslapį pasirinktame ekrane.
5. Prezentacijos imtuvas: ryšys užmegztas: Prezentacijos imtuvo puslapis gauna PresentationConnectionAvailable įvykį, kuriame yra PresentationConnection objektas.
6. Prezentacijos valdiklis: ryšys užmegztas: Prezentacijos valdiklis taip pat gauna PresentationConnectionAvailable įvykį su savo PresentationConnection objektu.
7. Komunikacija: Dabar prezentacijos valdiklis ir imtuvas gali bendrauti naudodami postMessage() metodą, priklausantį PresentationConnection objektui.

Diegimo detalės: kodo pavyzdžiai

Panagrinėkime kodą, reikalingą paprastai prezentacijos programai įdiegti.

Prezentacijos valdiklis (sender.html)

Šis puslapis leidžia vartotojui pasirinkti prezentacijos ekraną ir siųsti pranešimus imtuvui.

<!DOCTYPE html>
<html>
<head>
  <title>Presentation Controller</title>
</head>
<body>
  <button id="startPresentation">Start Presentation</button>
  <input type="text" id="messageInput" placeholder="Enter message">
  <button id="sendMessage">Send Message</button>
  <div id="status"></div>
  <script>
    let connection = null;

    const startPresentationButton = document.getElementById('startPresentation');
    const messageInput = document.getElementById('messageInput');
    const sendMessageButton = document.getElementById('sendMessage');
    const statusDiv = document.getElementById('status');

    startPresentationButton.addEventListener('click', async () => {
      try {
        connection = await navigator.presentation.defaultRequest.start('receiver.html');
        statusDiv.textContent = 'Presentation started!';
        connection.onmessage = (event) => {
          statusDiv.textContent += '\nReceived from receiver: ' + event.data;
        };
        connection.onclose = () => {
          statusDiv.textContent = 'Presentation closed.';
          connection = null;
        };
      } catch (error) {
        statusDiv.textContent = 'Error starting presentation: ' + error;
      }
    });

    sendMessageButton.addEventListener('click', () => {
      if (connection) {
        const message = messageInput.value;
        connection.postMessage(message);
        statusDiv.textContent += '\nSent: ' + message;
        messageInput.value = '';
      } else {
        statusDiv.textContent = 'No presentation connection.';
      }
    });
  </script>
</body>
</html>

Prezentacijos imtuvas (receiver.html)

Šiame puslapyje rodomas turinys, gautas iš prezentacijos valdiklio.

<!DOCTYPE html>
<html>
<head>
  <title>Presentation Receiver</title>
</head>
<body>
  <div id="content">Waiting for content...</div>

  <script>
    navigator.presentation.receiver.connectionList.then(list => {
      list.connections.forEach(connection => {
        handleConnection(connection);
      });
      list.addEventListener('connectionavailable', event => {
        handleConnection(event.connection);
      });
    });

    function handleConnection(connection) {
      const contentDiv = document.getElementById('content');
      contentDiv.textContent = 'Connection established!';
      connection.onmessage = (event) => {
        contentDiv.textContent += '\nReceived: ' + event.data;
        connection.postMessage('Receiver received: ' + event.data);
      };
      connection.onclose = () => {
        contentDiv.textContent = 'Connection closed.';
      };
    }
  </script>
</body>
</html>

Paaiškinimas:

• sender.html (prezentacijos valdiklis) pateikia prezentacijos užklausą naudodamas navigator.presentation.defaultRequest.start('receiver.html'). Tada jis laukia, kol bus užmegztas ryšys, ir pateikia mygtuką pranešimams siųsti.
• receiver.html (prezentacijos imtuvas) laukia gaunamų ryšių naudodamas navigator.presentation.receiver.connectionList. Kai ryšys užmezgamas, jis laukia pranešimų ir juos rodo. Jis taip pat išsiunčia atsakymo pranešimą.

Prezentacijos prieinamumo tvarkymas

Svarbu patikrinti prezentacijos ekrano prieinamumą prieš bandant pradėti prezentaciją. Galite naudoti navigator.presentation.defaultRequest.getAvailability() metodą, norėdami nustatyti, ar yra prieinamų prezentacijos ekranų.

navigator.presentation.defaultRequest.getAvailability()
  .then(availability => {
    if (availability.value) {
      console.log('Presentation displays are available.');
    } else {
      console.log('No presentation displays available.');
    }

    availability.addEventListener('change', () => {
      if (availability.value) {
        console.log('Presentation displays are now available.');
      } else {
        console.log('Presentation displays are no longer available.');
      }
    });
  })
  .catch(error => {
    console.error('Error getting presentation availability:', error);
  });

Klaidų tvarkymas ir atsparumas

Kaip ir su bet kuria žiniatinklio API, tinkamas klaidų tvarkymas yra labai svarbus. Štai keletas aspektų, į kuriuos reikia atsižvelgti:

• Gaudykite išimtis: Apgaubkite savo „Presentation API“ iškvietimus try...catch blokais, kad apdorotumėte galimas klaidas.
• Tvarkykite ryšio praradimą: Klausykitės close įvykio PresentationConnection objekte, kad nustatytumėte, kada ryšys prarandamas. Įdiekite mechanizmą, skirtą pakartotinai prisijungti arba sklandžiai pabloginti vartotojo patirtį.
• Informuokite vartotoją: Pateikite informatyvius klaidų pranešimus vartotojui, paaiškindami problemą ir siūlydami galimus sprendimus.
• Sklandus funkcionalumo mažinimas (Graceful Degradation): Jei naršyklė nepalaiko „Presentation API“ arba nėra prieinamų prezentacijos ekranų, užtikrinkite, kad jūsų programa vis tiek teiktų naudojamą patirtį, net jei kelių ekranų funkcionalumas yra išjungtas.

Saugumo aspektai

„Presentation API“ turi integruotas saugumo funkcijas, skirtas apsaugoti vartotojus ir užkirsti kelią piktavališkam naudojimui:

• Vartotojo sutikimas: Naršyklė visada paprašo vartotojo pasirinkti ekraną prezentacijai, užtikrindama, kad vartotojas žino ir pritaria prezentacijai.
• Skirtingų kilmės vietų apribojimai (Cross-Origin Restrictions): „Presentation API“ atsižvelgia į skirtingų kilmės vietų politiką. Prezentacijos valdiklis ir imtuvas turi būti teikiami iš tos pačios kilmės vietos arba naudoti CORS (Cross-Origin Resource Sharing) komunikacijai.
• HTTPS reikalavimas: Dėl saugumo priežasčių „Presentation API“ naudojimas paprastai yra apribotas saugiais kontekstais (HTTPS).

Gerosios praktikos kuriant keliems ekranams

Norėdami sukurti patrauklias ir vartotojui draugiškas kelių ekranų programas, atsižvelkite į šias gerąsias praktikas:

• Kurkite atsižvelgdami į skirtingus ekrano dydžius ir raiškas: Užtikrinkite, kad jūsų prezentacijos imtuvo puslapis sklandžiai prisitaikytų prie įvairių ekranų dydžių ir raiškų. Naudokite adaptyvaus dizaino (responsive design) technikas, kad sukurtumėte nuoseklią vartotojo patirtį skirtinguose ekranuose.
• Optimizuokite našumą: Sumažinkite duomenų, perduodamų tarp prezentacijos valdiklio ir imtuvo, kiekį, kad užtikrintumėte sklandų veikimą, ypač esant lėtam ryšiui. Apsvarstykite galimybę naudoti duomenų glaudinimo technikas.
• Pateikite aiškias vizualines užuominas: Aiškiai parodykite vartotojui, kuris ekranas yra pagrindinis, o kuris – antrinis. Naudokite vizualines užuominas, kad nukreiptumėte vartotojo dėmesį ir sąveiką.
• Atsižvelkite į prieinamumą: Užtikrinkite, kad jūsų kelių ekranų programa būtų prieinama vartotojams su negalia. Pateikite alternatyvų tekstą paveikslėliams, naudokite tinkamą spalvų kontrastą ir užtikrinkite klaviatūros naršymo palaikymą.
• Testuokite skirtinguose įrenginiuose ir naršyklėse: Kruopščiai išbandykite savo programą įvairiuose įrenginiuose ir naršyklėse, kad užtikrintumėte suderinamumą ir nustatytumėte galimas problemas. Nors „Presentation API“ yra subrendusi, naršyklių palaikymas ir diegimo niuansai vis dar egzistuoja.
• Pagalvokite apie vartotojo kelionę: Apsvarstykite visą vartotojo patirtį nuo pradinio nustatymo iki atsijungimo. Pateikite aiškias instrukcijas ir grįžtamąjį ryšį, kad padėtumėte vartotojui pereiti per procesą.

Realaus pasaulio pavyzdžiai ir naudojimo atvejai

„Presentation API“ atveria platų spektrą galimybių inovatyvioms interneto programoms. Štai keletas pavyzdžių:

• Interaktyvios lentos: Interneto pagrindu veikianti lentos programa, leidžianti keliems vartotojams bendradarbiauti bendroje drobėje, rodomoje dideliame jutikliniame ekrane arba projektoriuje.
• Nuotolinio bendradarbiavimo įrankiai: Įrankis, leidžiantis nuotolinėms komandoms dalytis ir komentuoti dokumentus ar prezentacijas realiuoju laiku keliuose ekranuose.
• Konferencijų ir renginių programos: Pranešėjų informacijos, tvarkaraščių ir interaktyvių apklausų rodymas dideliuose ekranuose konferencijose ir renginiuose, valdomas iš centrinės interneto programos.
• Muziejų ir galerijų eksponatai: Interaktyvių eksponatų kūrimas, kurie įtraukia lankytojus keliuose ekranuose, suteikdami gilesnių įžvalgų apie rodomus artefaktus. Įsivaizduokite pagrindinį ekraną, rodantį artefaktą, ir mažesnius ekranus, siūlančius papildomą kontekstą ar interaktyvius elementus.
• Mokymasis klasėje: Mokytojai gali naudoti pagrindinį ekraną mokymui, o mokiniai sąveikauja su papildomu turiniu savo individualiuose įrenginiuose, visa tai koordinuojama per „Presentation API“.

Naršyklių palaikymas ir alternatyvos

„Presentation API“ daugiausia palaiko „Chromium“ pagrindu veikiančios naršyklės, tokios kaip „Google Chrome“ ir „Microsoft Edge“. Kitos naršyklės gali siūlyti dalinį palaikymą arba jo visai neturėti. Naujausią informaciją apie naršyklių suderinamumą rasite MDN Web Docs.

Jei jums reikia palaikyti naršykles, kurios neturi integruoto „Presentation API“ palaikymo, galite apsvarstyti šias alternatyvas:

• WebSockets: Naudokite „WebSockets“, kad sukurtumėte nuolatinį ryšį tarp prezentacijos valdiklio ir imtuvo, ir rankiniu būdu valdykite komunikacijos protokolą. Šis požiūris reikalauja daugiau programavimo, bet siūlo didesnį lankstumą.
• WebRTC: „WebRTC“ („Web Real-Time Communication“) gali būti naudojamas tiesioginiam (peer-to-peer) ryšiui, leidžiančiam kurti kelių ekranų programas, nepasikliaujant centriniu serveriu. Tačiau „WebRTC“ yra sudėtingiau nustatyti ir valdyti.
• Trečiųjų šalių bibliotekos: Ieškokite „JavaScript“ bibliotekų ar karkasų, kurie suteikia abstrakcijas kelių ekranų komunikacijai ir prezentacijų valdymui.

Kelių ekranų interneto kūrimo ateitis

„Frontend Presentation API“ yra svarbus žingsnis į priekį, leidžiantis kurti turtingesnes ir labiau įtraukiančias kelių ekranų interneto patirtis. Augant naršyklių palaikymui ir kūrėjams tiriant visas šios technologijos galimybes, galime tikėtis pamatyti dar daugiau inovatyvių programų, kurios išnaudoja kelių ekranų galią.

Išvada

„Presentation API“ suteikia interneto kūrėjams galimybę kurti sklandžias ir įtraukiančias kelių ekranų patirtis, atveriant naujas galimybes prezentacijoms, bendradarbiavimui, skaitmeniniams ženklams ir kt. Suprasdami pagrindines sąvokas, diegimo detales ir šiame vadove aprašytas geriausias praktikas, galite pasinaudoti „Presentation API“, kad sukurtumėte inovatyvias interneto programas, kurios išeina už vieno ekrano rėmų. Pasinaudokite šia technologija ir atverkite kelių ekranų interneto kūrimo potencialą!

Apsvarstykite galimybę eksperimentuoti su pateiktais kodo pavyzdžiais ir tyrinėti įvairius naudojimo atvejus, kad giliau suprastumėte „Presentation API“. Sekite naršyklių atnaujinimus ir naujas funkcijas, kad užtikrintumėte, jog jūsų programos išliks suderinamos ir pasinaudos naujausiais pasiekimais kelių ekranų interneto kūrimo srityje.